<template>
  <div class="container">
    <h2>NOMA 参数配置与结果展示</h2>

    <el-container style="border: 1px solid #ebeef5; border-radius: 8px; overflow: hidden;">
      <!-- 左侧参数输入区域 -->
      <el-aside width="300px" style="background-color: #f9f9f9; padding: 20px;">
        <el-form :model="formData" label-width="130px" @submit.prevent="submitForm" class="form">
          <el-form-item label="HAP 数量 (≥5)">
            <el-input-number v-model.number="formData.hapCount" :min="5" controls-position="right" />
          </el-form-item>

          <el-form-item label="发射功率 P_hap">
            <el-input-number v-model.number="formData.power" controls-position="right" />
          </el-form-item>

          <el-button native-type="submit" type="primary" :loading="loading" block>提交</el-button>
        </el-form>

        <div v-if="loading" style="margin-top: 20px;">
          <el-skeleton :rows="4" animated />
        </div>
      </el-aside>

      <!-- 右侧结果展示区域 -->
      <el-main style="padding: 20px;">
        <div v-if="images.length && !loading" class="image-container">
          <div v-for="(img, index) in images" :key="index" class="image-item">
            <el-card shadow="hover" style="margin-bottom: 20px;">
              <el-image
                :src="'data:image/png;base64,' + img.image_base64"
                :preview-src-list="allBase64Images"
                class="image-preview"
                fit="cover"
                lazy
                scroll-container=".image-container"
              >
              </el-image>
            </el-card>
          </div>
        </div>
        <div v-else-if="!loading && !images.length" style="text-align: center; color: #999;">
          暂无图片，请先提交参数。
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted,computed } from 'vue'
import axios from 'axios'

const images = ref([])
const loading = ref(false)
const username = ref(sessionStorage.getItem('username') || '')

// 页面加载时检查是否已登录
onMounted(() => {
  if (!username.value) {
    alert('请先登录')
    // 假设你使用 Vue Router
    this.$router.push("/login");
  }
})
const formData = ref({
  hapCount: 5,
  power: 100
})

// 页面挂载时处理缓存逻辑
onMounted(() => {
  const isNewLogin = localStorage.getItem('isNewLogin') === 'true'
  if (isNewLogin) {
    images.value = []
    localStorage.removeItem('isNewLogin')
    localStorage.removeItem('galleryImages')
  } else {
    const cachedImages = localStorage.getItem('galleryImages')
    images.value = cachedImages ? JSON.parse(cachedImages) : []
  }
})
const allBase64Images = computed(() => 
  images.value.map(img => 'data:image/png;base64,' + img.image_base64)
)

// 提交表单
const submitForm = async () => {
  loading.value = true
  try {
    const response = await axios.post('http://127.0.0.1:5000/api/noma', {
      hap_count: formData.value.hapCount,
      p_hap: formData.value.power,
      username:username.value
    })

    images.value = response.data
    localStorage.setItem('galleryImages', JSON.stringify(images.value))
  } catch (error) {
    console.error('请求失败:', error)
    alert('图片生成失败，请检查输入或稍后再试。')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.container {
  max-width: 1500px;
  margin: auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.form {
  margin-bottom: 20px;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.image-item {
  height: 350px; /* 设置一个固定高度 */
  flex: 0 0 calc(33.333% - 20px); /* 确保每个项目占三分之一宽度并考虑间隔 */
  box-sizing: border-box;
  max-width: calc(33.333% - 20px); /* 保证最大宽度 */
}


.image-preview {
  width: 100%; /* 图片宽度设为100%，以填满容器 */
  height: 100%; /* 设置一个固定高度 */
  object-fit: cover; /* 确保图片不失真，并按比例缩放至完全覆盖容器 */
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  cursor: zoom-in; /* 增加交互反馈 */
}

@media (max-width: 992px) {
  .image-item {
    flex: 0 0 calc(50% - 20px); /* 在中等屏幕尺寸上，每行两个 */
    max-width: calc(50% - 20px);
  }
}

@media (max-width: 600px) {
  .image-item {
    flex: 0 0 100%; /* 在小屏幕尺寸上，每行一个 */
    max-width: 100%;
  }
}
</style>